<template>
  <div>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-12">
        <h2>项目编辑</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'productList' }">
              项目列表
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'product' }">
              项目
            </router-link>
          <li>
            <router-link :to="{ name: 'productDetail' }">
              项目详情
            </router-link>
          </li>
          </li>
          <li class="active">
            <strong>项目编辑</strong>
          </li>
        </ol>
      </div>
    </div>


    <div class="wrapper wrapper-content animated fadeInUp">
      <div class="ibox ">
        <div class="ibox-title">
          <h5></h5>
          <div class="ibox-tools">
            <router-link :to="{ name: 'productDetail'}" class="btn btn-primary btn-xs">
                  <small><i class="fa fa-undo"></i></small> 返回
            </router-link>
          </div>
        </div>
        <div class="ibox-content">
          <div class="form-horizontal">

            <div class="form-group" v-bind:class="{ 'has-error': productNameExistFlag }">
              <label class="col-sm-3 control-label">项目名称</label>
              <div class="col-sm-4">
                  <input type="text" class="form-control" v-model='productDetail.name' v-on:change="checkProductNameExist">
              </div>
              <p v-if='productNameExistFlag' class="col-sm-3 control-label text-align-left">
                项目名已经存在
              </p>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">项目描述</label>
              <div class="col-sm-4">
                  <textarea class="form-control" v-model='productDetail.description'>
                  </textarea>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">权限</label>
              <div class="col-sm-4">
                <select class="form-control" v-model="productDetail.permissions" :disabled="productDetail.userid != userid">
                  <option v-for="(item, index) in config.ProductPermissions" :value="item.code">{{item.value}}</option>
                </select>

              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">人员</label>
              <div class="col-sm-4">
                <div>
                  <multiselect
                    v-model="members"
                    placeholder="输入关键字进行检索"
                    selectLabel=""
                    selectedLabel="已选择"
                    deselectLabel="再次点击删除该选项"
                    :close-on-select="false"
                    :show-labels="true"
                    track-by="id"
                    label="username"
                    :options="userList"
                    :multiple="true"
                  >
                      
                  </multiselect>
                </div>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <div class="col-sm-4 col-sm-offset-3">
                <a class="btn btn-primary" v-on:click="submit">
                  <i class="fa fa-save"></i> 保存
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import header from '@/components/Header.vue'
import server from '@/server/server.js'
import cookie from '@/server/cookie.js'
import Multiselect from 'vue-multiselect'
export default {
  name: 'productEdit',
  data () {
    return {
      userid: cookie.getCookie('id'),
      productNameExistFlag: false,
      productDetail: {},
      productName: '',
      members: [],
      userList: [
      ],
    }
  },
  components: {
    'header-link': header,
    'multiselect': Multiselect
  },
  created () {
    const vue = this
    // 获取问题列表
    const params = "productId=" + this.$route.params.productId
    server.get(server.getProductDetail, null, params, true, false, this, function(data) {
      vue.productDetail = data;
      vue.productName = vue.productDetail.name;

      // 搜索所有用户
      server.get(server.getUserListUrl, null, '', true, false, this, function(data) {
          vue.userList = data;
          vue.userList.forEach(function(element, index) {
            if (element.id == vue.userid) {
              element.$isDisabled = true;
            }
          })

          vue.productDetail.members.split(',').forEach(function(element, index) {
            vue.userList.forEach(function(element1, index1) {
              if (element1.id == element) {
                vue.members.push(element1);
              }
            })
          })
      })


    })
  },
  mounted () {
  },
  methods: {
    checkProductNameExist: function() {
    const vue = this
      if (vue.productName == vue.productDetail.name) {
        vue.productNameExistFlag = false
        return false
      }
      // 检查项目名是否存在
      // 检查项目名是否存在
      const params = {
        productName: vue.productDetail.name
      }
      server.post(server.postProductNameCheckUrl, null, params, true, false, this, function(data) {
        vue.productNameExistFlag = data
      })
    },
    submit: function() {
      const vue = this

      let members = [];
      vue.members.forEach(function(element, index) {
        members.push(element.id);
      })
      members = members.join(',');

      const params = {
        id: vue.productDetail.id,
        name: vue.productDetail.name,
        description: vue.productDetail.description,
        permissions: vue.productDetail.permissions,
        members: members
      }
      server.post(server.postProductUpdateUrl, null, params, true, false, this, function(data) {
          vue.$toastr('success', data, '成功')
          vue.$router.push({ name: "productDetail" })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.text-align-left {
  text-align: left;
}

</style>
